<template>
  <div>
    <div class="title"> {{"阶段配置 - ["+phaseData.name + "]"}}</div>
    <el-form :model="formData" label-width="85px" ref="ruleForm" size="small" :hide-required-asterisk="true">
      <el-row :gutter="24">
        <el-col :xs="23" :sm="12" :md="12" :lg="6" :xl="6">
          <el-form-item label="阶段名称">
            <el-input v-model="phaseData.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="12" :md="12" :lg="6" :xl="6">
          <el-form-item label="阶段类型">
            <el-input v-model="phaseData.phaseType" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="12" :md="12" :lg="6" :xl="6">
          <el-form-item label="阶段编码">
            <el-input v-model="phaseData.sn" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="23" :sm="12" :md="12" :lg="6" :xl="6">
          <el-form-item label-width="0" style="text-align: right;" class="btnGourd">
            <el-button type="primary" size="mini" @click="handleAdd()">添 加</el-button>
            <el-button type="primary" size="mini" @click="handleEdit()">编 辑</el-button>
            <el-button type="primary" size="mini" @click="handleDel()">删 除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <div>
          <el-row :gutter="24" style="clear:both">
            <el-col :xs="24">
              <div class="tableAuto" style="padding:0 12px">
                <el-table :data="tableData" :height="height" @row-click="rowClick" style="width:100%" border stripe v-loading="tableLoading"
                  :header-cell-style="{background:'#EAEBEC'}" ref="refTable" highlight-current-row>
                  <el-table-column label="" width="50" align="center">
                    <template slot-scope="scope">
                      <div>
                        <el-radio :label="scope.row.fid" v-model="radioId">&nbsp;</el-radio>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                  <el-table-column prop="paraName" show-overflow-tooltip label="数据名称"></el-table-column>
                  <el-table-column prop="type" show-overflow-tooltip label="数据类型">
                    <template slot-scope="scope">
                      {{getDataType(scope.row.type)}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="uom" show-overflow-tooltip :label="$t('basic.company')"></el-table-column>
                  <el-table-column prop="target" show-overflow-tooltip label="目标值"></el-table-column>
                </el-table>
              </div>
            </el-col>
            <el-col :xs="24">
              <div class="pagination-area">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]"
                  :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper"
                  :total="pager.total">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="23" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="备注">
            <el-input type="textarea" rows="2" v-model="formData.flastModifyComment" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footerBtn">
      <el-button type="primary" size="small" :loading="loading"
        @click="handleConfirmStorage('ruleForm')">{{ $t("common.preservation") }}</el-button>
      <el-button @click="handleClose()" size="small">{{ $t("common.cancel") }}</el-button>
    </div>
    <el-dialog :title="title" :visible.sync="isShowAdd" :close-on-click-modal="false" :before-close="handleCloseAdd"
      :width="screenWidth > 1000 ? '30%' : '30%'" v-dialogDrag>
      <el-form :model="ruleForm" label-width="85px" ref="formName" size="small" :rules="addRules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <el-col :xs="24">
            <el-form-item label="数据名称" prop="paraName">
              <el-input type="text" v-model="ruleForm.paraName" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="数据类型" prop="type" class="selectClass">
              <el-select v-model="ruleForm.type" placeholder="" clearabl>
                <el-option v-for="(item,index) in dataTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.company')" prop="uom" class="selectClass">
              <el-select v-model="ruleForm.uom" placeholder="" clearable>
                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.fid" :value="item.fid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item label="目标值" prop="target">
              <el-input type="number" v-enterNumber2 v-model="ruleForm.target" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" :loading="loadingTab"
          @click="handleConfirm('formName')">{{ $t("common.preservation") }}</el-button>
        <el-button @click="handleCloseAdd()" size="small">{{ $t("common.cancel") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { configure } from "@/api/configure"
import { formula } from "@/api/formula"
export default {
  props: {
    screenWidth: Number,
    isShow: Boolean,
    phaseData: Object,
    parentFid: String
  },
  data () {
    let uomFn = (rule, value, callback) => {
      if (this.ruleForm.type === '0' || this.ruleForm.type === '1') {
        if (!value) {
          callback(new Error('单位不能为空'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    }
    return {
      height: "calc(100vh - 375px)",
      formData: {
        flastModifyComment: "", //备注
      },
      ruleForm: {
        paraName: "",//数据名称
        type: "", //数据类型
        uom: "", //单位
        target: "", //目标值
      },
      tableData: [],
      tableLoading: false,
      loadingTab: false,
      loading: false,
      radioId: "",
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      dataTypeList: [{
        label: "Float",
        value: "0"
      }, {
        label: "Int",
        value: "1"
      }, {
        label: "String",
        value: "2"
      }, {
        label: "Bool",
        value: "3"
      }],
      isShowAdd: false,
      title: "添加",
      uomIdList: [],
      addRules: {
        paraName: [{ required: true, message: '数据名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
        uom: [{ validator: uomFn, trigger: 'change' }],
        target: [{ required: true, message: '目标值不能为空', trigger: 'blur' }],
      }
    }
  },
  created () {
    this.getUomList()
    this.phaseIptList()
  },
  methods: {
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    phaseIptList () {
      const param = {
        phaseId: this.parentFid,
        page: this.pager.pageNum,
        size: this.pager.pageSize
      }
      this.tableLoading = true
      formula.phaseIptList(param).then(res => {
        this.tableLoading = false
        console.log(res)
        // if(res.code == 200){
        //     this.allTable = res.data.rows
        //     this.tableData = res.data.rows.filter(item => {
        //         return item.paraName && this.$util.isNumber(item.type) && item.groups != 3
        //     })
        //     let item = res.data.rows.find(item => {
        //         return (item.target !== '' && item.target !== null) || item.groups == 3
        //     }) || {}
        //     if(!parseFloat(this.formData.startDelay)){
        //         this.formData.startDelay = item.target
        //     }
        //     console.log(item)
        //     this.fid = item.fid
        //     if(JSON.stringify(item) != '{}'){
        //         this.pager.total = res.data.total - 1
        //     }else{
        //         this.pager.total = res.data.total
        //     }

        // }
      })
    },
    handleAdd () {
      this.title = "添加"
      this.ruleForm = {}
      try {
        this.$refs['formName'].resetFields();
      } catch (e) { }
      this.isShowAdd = true
    },
    handleEdit () {
      this.isShowAdd = true
    },
    handleDel () {

    },
    handleSizeChange (val) {
      this.pager.pageSize = val
      this.phaseIptList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.phaseIptList()
    },
    handleClose () {
      this.$emit('handleClose', 'PH_DATA')
    },
    handleCloseAdd () {
      this.isShowAdd = false
    },
    rowClick (row) {
      this.radioId = row.fid;
      this.$refs.refTable.setCurrentRow(row);
    },
    handleConfirm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        }
      })
    },
    handleConfirmStorage (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        }
      })
    },
    getDataType (id) {
      if (!id && id !== 0) return ''
      return this.dataTypeList.find(item => item.value == id).label
    },
  }
}
</script>

<style scoped>
.selectClass >>> .el-select {
  width: 100%;
}
.pagination-area {
  padding: 10px;
}
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-bottom: 10px;
}
.footerBtn {
  text-align: right;
}
</style>